import React, { Component} from 'react'
import { Tabs} from 'antd'
import { LeftOutlined } from '@ant-design/icons'
import kindCSS from './Kind.module.css'
import { Link } from 'react-router-dom';
import axios from 'axios'
const style = {
    color: '#c5c5c5',
    fontSize: '0.5rem',
    padding: '0 0.25rem'
}
const btnCss = {
    width: '5.8rem',
    height: '0.8rem',
    outline: 0,
    border: 0,
    background: '#f2f2f2',
    borderRadius: '0.07rem',
    textIndent: ' 1em',
    lineHeight: ' 0.8rem',
    fontSize: '0.35rem',
    textAlign: ' center',
    color: '#c5c5c5',
}
const { TabPane } = Tabs;
export default class Kind extends Component {
    constructor() {
        super()
        this.state = {
            kindpList: [],
            kindList: [
                { 
                    photos: 
                        { 
                            paht: '' 
                        } 
                }
            ],
            apiList: [
                {
                    api: "brands/brands/getallbrands"
                }, {
                    api: "nice/product/selectseries"
                }, {
                    api: 'nice/product/selectbeauty'
                }, {
                    api: 'nice/product/selectbeauty'
                }, {
                    api: 'nice/product/selectbeauty'
                }, {
                    api: 'nice/product/selectbeauty'
                }, {
                    api: 'nice/product/selectbeauty'
                }, { 
                    api: 'nice/product/selectbeauty' 
                }
            ],
            panes: [
                {
                    title: '系列',
                    key: '2',
                    api: "nice/product/selectseries"
                },
                {
                    title: '美妆',
                    key: '3',
                    api: 'nice/product/selectbeauty'
                },
                {
                    title: '篮球鞋',
                    key: '4',
                    api: 'nice/product/selectbeauty'
                },
                {
                    title: '品类',
                    key: '5',
                    api: 'nice/product/selectbeauty'
                },
                {
                    title: '女生',
                    key: '6',
                    api: 'nice/product/selectbeauty'
                },
                {
                    title: '跑鞋',
                    key: '7',
                    api: 'nice/product/selectbeauty'
                },
                {
                    title: '休闲鞋',
                    key: '8',
                    api: 'nice/product/selectbeauty'
                },
            ]
        }
    }
    nav = {
        tabPosition: 'left',
    };
    onTabChange(key) {
        axios.get('/kind/api/' + this.state.apiList[key - 1].api, { page: 2, pagesize: 30 }).then(res => {
            if (this.state.apiList[key - 1].api ==="brands/brands/getallbrands") {
                this.setState({
                    kindpList: res.data
                })
            } else {
                this.setState({
                    kindList: res.data
                })
            }

        })
    }
    componentDidMount() {
        this.onTabChange(1)
    }
    render() {
        const { tabPosition } = this.nav;
        return (
            <div id='div'>
                <header className={kindCSS.header}>
                    <Link to='/'><LeftOutlined style={style} /></Link><Link to='/search'><button style={btnCss}>DUNK 熊猫</button></Link>
                </header>

                <Tabs onChange={this.onChange}
                    tabPosition={tabPosition}
                    activeKey={this.state.activeKey}
                    style={{color: '#c5c5c5', background: '#fff!important', position: 'fixed', left: '0', top: '1.2rem' }}
                    onTabClick={(key) => { this.onTabChange(key) }}
                >
                    <TabPane style={{paddingLeft: '0' }} tab="品牌" key="1">
                        {
                            this.state.kindpList.map((el,i)=>
                                <Link key={i} to='/Community'>
                                    <img className={kindCSS.img} src={el.image} alt='' />
                                </Link>)
                        }
                    </TabPane>
                    {this.state.panes.map((pane,i) => <TabPane key={i} style={{paddingLeft: '0' }} tab={pane.title} key={pane.key}>
                        {
                            this.state.kindList.map((ela,i) => {
                                return <i style={{fontStyle:'normal'}} key={i}>
                                    {
                                        ela.photos.length&&ela.photos.map((ele, a) =>{
                                            return <i style={{fontStyle:'normal'}} key={a}>
                                                <Link to='/Community'>
                                                    <img className={kindCSS.img} src={ele.path} alt='' />
                                                </Link>
                                            </i>
                                        })
                                   }
                                </i>
                            })
                        }


                    </TabPane>)}
                </Tabs>
            </div>
        )
    }
}
